<template>
    <div>

        
        <page-container 
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
            <template  v-slot:content>
                <mask-image :url="backImage" :height="500">
                    <template>
                        <div class="mask-iamge-text">
                            <section-title title="竞赛" size="max"></section-title>
                        </div>
                        
                    </template>
                </mask-image>
               
                <div class="search-mian">
                
                    
                    <div class="serach-body" >
                        <div class="search-data" >
                            <div v-show="page.records.length==0" style="min-height: 120vh;display: flex;align-items: center;justify-content: center;">
                                <el-empty description="暂无结果~"></el-empty>
                            </div>
                            
                            <records :data-list="page.records" @record="gotoMatchItem">
                            
                                <template slot="row" slot-scope="scope">
                                    <div class="match-item-main">
                                        <div class="match-info">
                                            <div class="match-title text-display-a-line">{{ scope.row.title }} </div>
                                            <div class="match-info-item">发布者：{{ scope.row.publisherName }}</div>
                                            <div class="match-info-item">竞赛时间：{{ scope.row.startTime }} - {{ scope.row.endTime }}</div>
                                            
                                        </div>
                                        <div class="match-cover">
                                            <el-image style="height: 156px;width: 200px;" :src="scope.row.cover?scope.row.cover:require('@/assets/7封面.png')"></el-image>
                                        </div>
                                    </div>
                                </template>
                            </records>

                            <div class="data-page">
                                <i-page :current="page.current" :size="page.size" :total="page.total" @change-page="handlerPage" ></i-page>
                            </div>
                        </div>
                        <div class="srarch-ability">
                            <div class="search-form">
                                <el-form  :model="search"  >
                                <el-form-item>
                                    <div class="search-form-item">
                                        <div class="search-input">
                                            <el-input v-model="search.value" placeholder="请输入要搜索的内容..."/>
                                        </div>
                                        
                                        <div class="search-btn" @click="searchHandler">
                                            <i class="el-icon-search"></i>
                                        </div>
                                    </div>
                                    
                                </el-form-item>
                                
                                </el-form>
                            </div>

                            <div>
                                <section-title title="推荐"></section-title>
                                <div style="text-align: center;width: 100%;">
                                    <div 
                                    style="margin-bottom: 10px;border: 1px solid #dcdfe6;width: 460px;height: 260px;cursor: pointer;" 
                                    v-for="(advert,index) in advertList" 
                                    :key="index"
                                    @click="gotoHerf(advert)"
                                    >
                                        <div v-if="advert.type === 1">
                                            <el-image style="width: 460px;height: 260px;" :src="advert.url">  </el-image>
                                        </div>
                                        <div v-if="advert.type === 2">
                                            <video style="width: 460px;height: 260px;" >
                                                <source :src="advert.url" type="video/mp4" />
                                            </video>
                                        </div>
                                        <div v-if="advert.type === 3" style="width: 460px;height: 260px;display: flex;justify-content: center;align-items:center;">
                                            {{ advert.slogan }}
                                        </div>
                                    </div>
                                   
                                </div>

                            </div>
                            
                            

                        </div>
                    </div>
                   
                </div>
            </template>
       </page-container>

    </div>
</template>

<script>

import PageContainer from '@/components/container/page-container/PageContainer.vue';
import SectionTitle from '@/components/plugs/section-title/SectionTitle.vue';
import MaskImage from '@/components/plugs/mask-image/MaskImage.vue';
import Records from '@/components/plugs/records/Records.vue';
import IPage from '@/components/plugs/i-page/IPage.vue'
import {get,post} from '@/utils/api.js'

export default {

    data(){
        return{
            pageConfig:{
                header:{
                    regular:true,
                    ceiling:true,
                    background:'transparent',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            backImage:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-about.jpg',
            search:{

            },
            page:{
                total:0,
                size:10,
                current:1,
                records:[],
            },
            advertList:[]
        }
    },
    methods:{
        getPage(){
            const promise =  get({
                url:'/base-match/front/match/page',
                params:{current:this.page.current,size:this.page.size,title:this.search.value}
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.page = res.data;
                }
            })
        },
        searchHandler(){
            // if(!this.search.value||this.search.value==null||this.search.value==''){
            //     this.$message.error('搜索的内容不能为空~');
            //     return;
            // }
            this.getPage();
        },
        handlerPage(page){
            this.page.current = page.current;
            this.page.size = page.size;
            this.getPage();

        },
        gotoMatchItem(row){
            this.$router.push(`/match/details/${row.id}`);
        },
        getAdvertList(){
            const promise = get({
                url:'/base-advert/front/advert/list'
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.advertList = res.data;
                }
            })        
        },
        gotoHerf(advert){
            window.location.href = advert.href;
        }
        


    },
    created(){
        this.getPage();
        this.getAdvertList();
    },
    components:{
        PageContainer,
        MaskImage,
        SectionTitle,
        Records,
        IPage
    }

}
</script>

<style scoped>
.mask-iamge-text{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
}
.search-mian{
    width: 100%;
    display: flex;
    justify-content: center;

}
.search-form{
    width: 100%;
    height: 120px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}
.search-form>>>form{
    width: 100%;
}
.serach-body{
    display: flex;
    justify-content: space-between;
    width: 1200px;
}
.search-data{
    padding-top: 80px;
    width: 60%;
}
.srarch-ability{
    width: 30%;
    /* margin: 0 auto; */
    padding-bottom: 20px;
}
.search-form-item{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dcdfe6;
}
.search-btn{
   width: 20%;
    height: 50px;
    /* margin:  0 auto; */
    text-align: center;
    font-weight: 600;
    color: #FF6900;
    font-size: 20px;
    line-height: 50px;
    
}
.search-btn:hover{
    cursor: pointer;
}
.search-input>>>input{
    border: 0;

}
.search-input{
    width: 80%;
}
/* .data-page{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 40px;
    animation: fadeInUp 1s;
} */

.match-item-main{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.match-title{
    font-size: 20px;
    font-weight: 600;
}

.match-info-item{
    margin-top: 20px;
    color: #999;
}

</style>